<template>
  <div>
    <particles></particles>
    <div class="module">
      <div class="content">
        <div class="logo">
          <img src="@/assets/logo_color.png" />
        </div>
        <div class="type">
          <span>集团登陆</span>
          <el-divider direction="vertical" />
          <span class="active">老师登录</span>
          <el-divider direction="vertical" />
          <span>学生登录</span>
        </div>
        <el-form
          ref="ruleFormRef"  
          :model="ruleForm"
          :rules="rules"
          label-width="0px"
          class="white-module global-ruleForm login-ruleForm"
          :size="formSize"
        >
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入">
              <template #prefix>
                <img class="input_img" src="@/assets/login/user.png" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              v-model="ruleForm.pwd"
              type="password"
              placeholder="请输入"
            >
              <template #prefix>
                <img class="input_img" src="@/assets/login/pwd.png" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
          <div class="oper">
            <div>
              <el-checkbox v-model="ruleForm.checked1" label="记住用户名" />
            </div>
            <div @click="dialogVisible = true">忘记密码</div>
          </div>
          <div class="protocol">
            <el-checkbox
              v-model="ruleForm.checked2"
              label="点击同意并接受即表示您已阅读了解并同意"
            /><span class="text" @click="protocolVisible = true"
              >《隐私协议》</span
            >
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title=""
      width="420px"
      custom-class="email-pwd"
      :before-close="handleClose"
    >
      <div class="titles">
        <p>邮箱验证</p>
        <div>验证码将会发送至您的邮箱地址</div>
      </div>
      <el-form
        v-if="emailStatus <= 2"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0px"
        class="white-module global-ruleForm login-ruleForm email-ruleForm"
        :size="formSize"
      >
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入您的邮箱">
            <template #prefix>
              <img class="input_img" src="@/assets/login/email.png" />
            </template>
          </el-input>
        </el-form-item>
        <div class="validity">为了您的账户安全，请进行安全校验</div>
        <div>
          <slider v-if="dialogVisible" :successFun="emailSuccess"></slider>
        </div>
        <el-form-item class="btns">
          <el-button
            :disabled="emailStatus != 2"
            type="primary"
            @click="submitEmail"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
      <div class="succestext" v-if="emailStatus == 3">
        请注意查收邮件，并按照邮件中的提示操作，完成 安全验证。没有收到？<span
          @click="emailStatus = 1"
          >重新发送验证邮件</span
        >
      </div>
    </el-dialog>
    <el-dialog
      v-model="protocolVisible"
      title="隐私协议"
      width="500px"
    >
      <div style="height:500px;overflow-y:auto;" class="global-scroll">
       
	　　在经济市场当中，协作的双方或数方为保障各自的合法权益，会在共同协商达成一致意见后签订的书面材料。那么双方公司协议书怎么写？接下来，关于双方公司协议书怎么写的详细内容，就由法律快车小编为您做更进一步的解答吧！



	　　一、双方公司协议书怎么写


	　　大致包含以下内容：



	　　（一）合伙经营协议书内容大体涉及：合伙人出资方式（货币、技术、设备等等）、资金及财务管理、盈亏如何分担、各自在合伙经营中担任的角色（职责）、散伙条件及对合伙债务承担等等。



	　　（二）可以根据你们的经营特点增减相关内容。



	　　（三）债务承担：如在合伙经营过程中有债务产生，合伙债务先由合伙财产偿还，合伙财产不足清偿时，以各合伙人占有的合伙组织财产份额为依据，按比例承担。



	　　（四）盈余分配：除去经营成本、日常开支、工资、奖金、需缴纳的税费等的收入为净利润，即合伙创收盈余，此为合伙分配的重点，将以各合伙人占有的合伙组织财产份额为依据，按比例分配。



	　　对合伙人的除名决议应当书面通知被除名人。被除名人自接到除名通知之日起，除名生效，被除名人退伙。合伙人退伙后，即视为放弃其在该合伙组织中占有的财产份额，并不再参与本年度合伙组织利润盈余分配，其他合伙人即自动拥有该财产份额，但不免除其因此给其他合伙人造成的损失。



	

	　　二、协议书的法律效应是什么


	　　订立协议书，其目的是为了更好地从制度上乃至法律上，把双方协议所承担的责任固定下来。作为一种能够明确彼此权利与义务、具有约束力的凭证性文书，协议书对当事人双方（或多方）都具有制约性，它能监督双方信守诺言、约束轻率反悔行为，它的作用，与合同基本相同。



	　　口头协议一律无效；书面协议有三种形式，即合同中的条款、独立的协议书及信函、电报、传真、电子邮件等其他书面形式。



	　　三、协议书的分类是什么


	　　协议书有广义和狭义之分。广义的协议书是指社会集团或个人处理各种社会关系、事务时常用的“契约”类文书，包括合同、议定书、条约、公约、联合宣言、联合声明、条据等。狭义的协议书指国家、政党、企业、团体或个人就某个问题经过谈判或共同协商，取得一致意见后，订立的一种具有经济或其它关系的契约性文书。协议书是应用写作的重要组成部分。



	　　协议书是契约文书的一种。是当事人双方（或多方）为了解决或预防纠纷，或确立某种法律关系，实现一定的共同利益、愿望，经过协商而达成一致后，签署的具有法律效力的记录性应用文。以上就是法律快车小编为您整理的双方公司协议书怎么写的解答，如果您还有疑问，欢迎咨询法律快车的律师。
       </div>
    </el-dialog>
  </div>
</template>
 
<script lang="ts" setup>
import particles from "./components/particles/particles.vue";
import slider from "./components/slider/slider.vue";
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
const formSize = ref("default");
//弹窗
const dialogVisible = ref(false);
//隐私协议
const protocolVisible = ref(false);

const emailStatus = ref(1);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  pwd: "",
});

const rules = reactive({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],

  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("可登录");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const emailSuccess = () => {
  emailStatus.value = 2;
};
const submitEmail = () => {
  emailStatus.value = 3;
};

const handleClose = (done: () => void) => {
  done();
  emailStatus.value = 1;
};
</script>
<style scoped lang="scss">
.module {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  .content {
    width: 420px;
    background: #ffffff;
    box-shadow: 0px 4px 9px 2px rgba(51, 51, 51, 0.12);
    border-radius: 8px;
    overflow: hidden;
    .logo {
      width: 130px;
      height: 34px;
      margin: auto;
      padding: 40px 0px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .type {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 32px;
      cursor: pointer;
      span {
        font-size: 18px;
        font-weight: 500;

        color: #4f5a70;
        padding: 0px 5px;
      }
      .active {
        color: #00a0e9;
      }
    }
  }
}
</style>
<style  lang="scss">
.login-ruleForm {
  padding: 0px 40px;
  .el-input,
  .el-select {
    width: 100%;
  }
  .el-input .el-input__inner {
    padding-left: 38px !important;
  }

  .input_img {
    width: 18px;
    height: 18px;
    margin-top: 9px;
    left: 0px;
    margin-right: 5px;
  }
  .el-form-item--default {
    margin-bottom: 24px;
  }
  .el-form-item--default .el-form-item__error {
    padding-top: 5px;
  }
  .btns {
    padding-top: 30px;
    .el-button {
      height: 44px !important;
      width: 100% !important;
      margin: 0px !important;
    }
  }
  .oper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -12px;
    color: #959ca9;
    .el-checkbox {
      height: auto;
      vertical-align: middle;
    }
    .el-checkbox__label {
      color: #959ca9;
    }
    div:last-child {
      cursor: pointer;
    }
  }
  .protocol {
    margin-top: 80px;
    line-height: 40px;
    margin: 80px -40px 0px;
    background: #f5f7fa;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    .el-checkbox {
      height: auto;
      vertical-align: middle;
    }
    .el-checkbox__label {
      color: #333333;
      line-height: 0px;
      font-size: 12px;
    }
    span.text {
      color: #2aafec;
      cursor: pointer;
    }
  }
}
.email-pwd {
  .titles {
    text-align: center;
    p {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 18px;
      margin: 10px 0px 0px;
    }

    div {
      font-size: 14px;
      font-weight: 400;
      color: #959ca9;
      margin-top: 8px;
    }
  }
  .email-ruleForm {
    padding: 0px 20px !important;
    margin-top: 60px;
    .validity {
      margin-top: -4px;
      text-align: center;
      margin-bottom: 16px;
    }

    .btns {
      padding-top: 40px;
    }
  }
  .succestext {
    font-size: 14px;
    padding: 80px 36px 200px;
    text-align: center;
    font-weight: 400;
    color: #333333;
    line-height: 23px;
    span {
      color: #00a0e9;
    }
  }
}
</style>